<template>
  <div id="works">
    <div class="worksContent" v-show="!uploadWorksFlag">
      <div class="worksContentTitle">
        <p>上传作品数量：{{workTotal}}</p>
        <button @click="uploadWorksFlag = true">发布作品</button>
      </div>
      <div class="worksContentList">
        <div class="worksContentListTab">
          <span v-for="(item, index) in worksTabList" :key="index" :class="{active: index === worksTabIndex}" @click="onWorksTab(index, item.classifyId)">{{item.classifyName}}</span>
        </div>
        <ul>
          <li v-for="(item, index) in workList" :key="index" @click="jumpTo('/worksDetail?worksId=' + item.id)">
            <img :src="$globalImageUrl + item.literatureImg" alt="">
            <!-- <video :src="$globalImageUrl + item.literatureImg" controls></video> -->
            <div class="worksContentListInfo">
              <h2>{{item.literatureName}}</h2>
              <p class="ellipse">发布时间：{{item.createTime}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="worksContent" v-show="uploadWorksFlag">
      <div class="userMaterialTitle">
        <h2 class="active">发布作品 <span></span></h2>
      </div>
      <div class="userMaterialMaterial">
        <form id="publishForm" action="http://www.artcreative.cn/cxpt/web/user/addLiter" method="post" enctype="multipart/form-data">
          <ul>
            <li>
              <div class="userMaterialMaterialLeft">
                <span></span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" placeholder="请输入作品名称" v-model="worksName" name="literatureName">
              </div>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span></span>
              </div>
              <div class="userMaterialMaterialRight">
                <select v-model="worksCategoryText" @change="onWorksCategory()" name="categoryId">
                  <option v-for="(item, index) in categoryData" :key="index">{{item.classifyName}}</option>
                </select>
                <select v-model="worksReclassifyText" @change="onWorksReclassify()" name="reclassifyId">
                  <option v-for="(item, index) in themeData" :key="index">{{item.classifyName}}</option>
                </select>
              </div>
            </li>
            <!-- <li>
              <div class="userMaterialMaterialLeft">
                <span></span>
              </div>
              <div class="userMaterialMaterialRight">
                <input type="text" placeholder="作品说明">
              </div>
            </li> -->
            <li>
              <!-- <span>注：不要在图片上放置设计师商业推广信息（除案例信息外），不超过100张图片，支持批量上传。</span> -->
              <p>作品封面图 </p>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span></span>
              </div>
              <div class="userMaterialMaterialRight">
                <div class="userMaterialMaterialRightBox">
                  <label v-for="(item, index) in uploadWorksList" :key="index">
                    <img class="showUploadFile" :src="item" alt="">
                    <!-- <video class="showUploadFile" :src="item" controls></video> -->
                  </label>
                  <label for="uploadFileWorksId" v-show="uploadWorksList.length < 1">
                    <div>
                      <img src="../../../assets/img/user/upimg.png" alt="">
                      <span>请上传 .png .jpg .jpeg .gif格式的图片</span>
                    </div>
                    <input id="uploadFileWorksId" type="file" accept="image/*" name="photoImg" @change="onUploadWorksFile($event)">
                  </label>
                </div>
              </div>
            </li>
            <li>
              <p>作品视频详情</p>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span></span>
              </div>
              <div class="userMaterialMaterialRight" style="padding-right: .2rem;">
                <div class="userMaterialMaterialRightBox">
                  <label v-for="(item, index) in uploadWorksVideoList" :key="index">
                    <!-- <img class="showUploadFile" :src="item" alt=""> -->
                    <video class="showUploadFile" :src="item" controls></video>
                  </label>
                  <label for="uploadFileWorksVideoId" v-show="uploadWorksVideoList.length < 1">
                    <div>
                      <img src="../../../assets/img/user/upimg.png" alt="">
                      <span>请上传 .mp4 .mov .avi格式的图片</span>
                    </div>
                    <input id="uploadFileWorksVideoId" type="file" accept="video/*" name="video" @change="onUploadWorksVideoFile($event)">
                  </label>
                </div>
              </div>
            </li>
            <li>
              <p>作品简介</p>
            </li>
            <li>
              <div class="userMaterialMaterialLeft">
                <span></span>
              </div>
              <div class="userMaterialMaterialRight">
                <div>
                  <div id="editor"></div>
                </div>
                <!-- <textarea placeholder="请输入作品简介" v-model="worksIntroduce" name="introduce"></textarea> -->
              </div>
            </li>
          </ul>
        </form>
      </div>
      <div class="btnBox">
        <button class="btnDef" type="submit" @click="handAddLiter($event)">发布</button>
      </div>
    </div>
  </div>
</template>

<script>
import '../../../assets/js/wangEditor'

export default {
  name: 'works',
  data () {
    return {
      worksTabIndex: 0,
      uploadWorksFlag: false,
      uploadWorksList: [],
      uploadWorksListFile: [],
      uploadWorksVideoListFile: [],
      uploadWorksVideoList: [],
      // uploadCoverList: [],
      worksTabList: ['画册', '海报', '数字媒体', '文创产品', '工艺品', '个性化', '包装'],
      workList: [],
      workTotal: '',
      worksName: '',
      worksCategoryId: '',
      worksCategoryText: '',
      worksReclassifyId: '',
      worksReclassifyText: '',
      worksCoverImg: '',
      worksCoverVideoImg: '',
      worksIntroduce: '',
      // worksImageText: '',
      categoryData: [],
      themeData: [],
      editor: Object
    }
  },
  created () {
    this.fetchSkillSelectClassify()
    this.fetchLiterByUserId()
    // 初始化富文本
    this.$nextTick(() => {
      // eslint-disable-next-line
      this.editor = new window.wangEditor('#editor')
      this.editor.customConfig.uploadImgServer = this.$globalImageUrl + '/web/area/uploadImage' // 上传路径
      this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 // 上传大小
      this.editor.customConfig.uploadImgMaxLength = 1 // 上传数量
      this.editor.customConfig.uploadFileName = 'file' // 自定义第一个图片文件参数名
      this.editor.customConfig.uploadImgTimeout = 5000 // 请求时限
      this.editor.customConfig.uploadImgHooks = {
        fail: (xhr, editor, result) => {
          this.$vux.toast.text('图片插入时出错')
        },
        error: (xhr, editor) => {
          this.$vux.toast.text('上传图片时出错')
        },
        timeout: (xhr, editor) => {
          this.$vux.toast.text('上传图片超时')
        },
        customInsert: function (insertImg, result, editor) {
          insertImg(result.data.url)
        }
      }
      this.editor.customConfig.customAlert = (info) => {
        this.$vux.toast.text(info)
      }
      this.editor.create()
    })
  },
  methods: {
    // 作品分类切换
    onWorksTab (val, id) {
      this.worksTabIndex = val
      this.fetchLiterByUserId(id)
    },
    onUploadWorksFile (e) {
      var file = e.target.files[0]
      this.uploadWorksListFile.push(file)
      var base64 = null
      var reader = new FileReader()
      reader.readAsDataURL(file)
      // onload为读取后的回调函数
      reader.onload = (e) => {
        base64 = e.target.result
        this.uploadWorksList.push(base64)
      }
    },
    onUploadWorksVideoFile (e) {
      var file = e.target.files[0]
      this.uploadWorksVideoListFile.push(file)
      var base64 = null
      var reader = new FileReader()
      reader.readAsDataURL(file)
      // onload为读取后的回调函数
      reader.onload = (e) => {
        base64 = e.target.result
        this.uploadWorksVideoList.push(base64)
      }
    },
    onUploadCoverFile (e) {
      var file = e.target.files[0]
      var base64 = null
      var reader = new FileReader()
      reader.readAsDataURL(file)
      // onload为读取后的回调函数
      reader.onload = (e) => {
        base64 = e.target.result
        this.uploadCoverList.push(base64)
      }
    },
    // 一级分类id
    onWorksCategory () {
      for (let i = 0; i < this.categoryData.length; i++) {
        if (this.worksCategoryText === this.categoryData[i].classifyName) {
          this.worksCategoryId = this.categoryData[i].classifyId
          this.fetchClassByParent(this.worksCategoryId)
          break
        }
      }
    },
    // 二级分类id
    onWorksReclassify () {
      for (let i = 0; i < this.themeData.length; i++) {
        if (this.worksReclassifyText === this.themeData[i].classifyName) {
          this.worksReclassifyId = this.themeData[i].classifyId
          break
        }
      }
    },
    // 获取我的作品tab
    fetchSkillSelectClassify () {
      this.$api.getSkillSelectClassify({
      }).then(res => {
        if (res.code === 0) {
          this.worksTabList = [{classifyName: '全部'}, ...res.data]
          // 获取一级分类
          this.categoryData = res.data
          // 获取二级分类
          this.fetchClassByParent(res.data[0].classifyId)
        }
      })
    },
    // 获取一级分类-重复
    // fetchSelectClassify () {
    //   this.$api.getSkillSelectClassify({
    //   }).then(res => {
    //     if (res.code === 0) {
    //       this.categoryData = res.data
    //       this.fetchClassByParent(res.data[0].classifyId)
    //     }
    //   })
    // },
    // 获取二级分类
    fetchClassByParent (id) {
      this.$api.getClassByParent({
        parentId: id
      }).then(res => {
        if (res.code === 0) {
          this.themeData = res.data
        }
      })
    },
    // 获取我的作品
    fetchLiterByUserId (id) {
      this.$api.getLiterByUserId({
        userId: this.$store.state.user.userId,
        pageNum: 1,
        categoryId: id
      }).then(res => {
        this.workList = res.data
        this.workTotal = res.total
      })
    },
    // 提交作品
    handAddLiter () {
      let imageText = this.editor.txt.html()
      this.worksCoverImg = this.uploadWorksListFile[0]
      this.worksCoverVideoImg = this.uploadWorksVideoListFile[0]

      if (this.worksName === '') {
        this.$vux.toast.text('请输入作品名称')
        return
      }
      if (this.worksCoverImg === undefined) {
        this.$vux.toast.text('请上传封面图')
        return
      }
      if (this.worksCategoryId === '') {
        this.$vux.toast.text('请选择分类')
        return
      }
      if (this.worksReclassifyId === '') {
        this.$vux.toast.text('请选择分类')
        return
      }
      if (imageText === '<p><br></p>') {
        this.$vux.toast.text('请输入作品简介')
        return
      }
      // if (this.worksIntroduce === '') {
      //   this.$vux.toast.text('请输入作品简介')
      //   return
      // }
      // if (this.worksImageText === undefined) {
      //   this.$vux.toast.text('请输入')
      //   return
      // }
      // if (this.worksCoverVideoImg === undefined) {
      //   this.$vux.toast.text('请上传视频')
      //   return
      // }
      if (!this.worksCoverVideoImg && this.worksCoverVideoImg !=undefined){
        this.$api.postAddLiter({
          literatureName: this.worksName,
          photoImg: this.worksCoverImg,
          categoryId: this.worksCategoryId,
          reclassifyId: this.worksReclassifyId,
          introduce: imageText,
          // content: imageText,
          userId: this.$store.state.user.userId,
          video: this.worksCoverVideoImg
        }).then(res => {
          if (res.code === 0) {
            this.uploadWorksFlag = false
            this.fetchLiterByUserId()
            this.$vux.toast.text(res.msg)
          }
        })
      } else {
        this.$api.postAddLiter({
          literatureName: this.worksName,
          photoImg: this.worksCoverImg,
          categoryId: this.worksCategoryId,
          reclassifyId: this.worksReclassifyId,
          introduce: imageText,
          // content: imageText,
          userId: this.$store.state.user.userId,
          // video: this.worksCoverVideoImg
        }).then(res => {
          if (res.code === 0) {
            this.uploadWorksFlag = false
            this.fetchLiterByUserId()
            this.$vux.toast.text(res.msg)
          }
        })
      }
      
    }
  }
}
</script>

<style lang="less" scoped>
#works{
  background-color: #f7f7f7;
  .worksContent{
    .worksContentTitle{
      width: 100%;
      background-color: #fff;
      border-radius: .1rem;
      line-height: .4rem;
      padding: .2rem;
      p{
        font-size: .16rem;
        font-weight: 500;
        color: #333;
        line-height: .4rem;
        display: inline-block;
      }
      button{
        font-size: .16rem;
        font-weight: 500;
        color: #fff;
        line-height: .4rem;
        border: none;
        float: right;
        padding: 0 .4rem;
        border-radius: .05rem;
        background-color: #15A29C;
        outline: none;
      }
    }
    .worksContentList{
      width: 100%;
      background-color: #fff;
      border-radius: .1rem;
      line-height: .4rem;
      padding: .2rem;
      margin-top: .2rem;
      .worksContentListTab{
        padding-bottom: .2rem;
        span{
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .24rem;
          display: inline-block;
          margin-right: .2rem;
        }
        span.active{
          color: #15A29C;
        }
      }
      ul{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        li:nth-child(4n) {
          margin-right: 0;
        }
        li{
          width: 2rem;
          margin-bottom: .2rem;
          margin-right: .2rem;
          img{
            display: inline-block;
            width: 2rem;
            height: 1.5rem;
          }
          .worksContentListInfo{
            padding: .1rem;
            box-shadow: 0 0 10px #eee;
            h2{
              font-size: .16rem;
              font-weight: 500;
              color: #333;
              line-height: .24rem;
            }
            p{
              font-size: .12rem;
              font-weight: 500;
              color: #333;
              line-height: .2rem;
            }
          }
        }
      }
    }
    .userMaterialTitle{
      background-color: #fff;
    }
    .userMaterialMaterial{
      background-color: #fff;
      ul{
        padding: .1rem 0;
        li{
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          // align-items: center;
          padding: .1rem 0;
          p{
            font-size: .14rem;
            font-weight: 500;
            color: #333;
            line-height: .4rem;
            margin: 0 .2rem;
            width: 100%;
            border-bottom: 1px solid #eee;
            span{
              font-size: .14rem;
              font-weight: 500;
              color: #ccc;
              line-height: .4rem;
            }
          }
          .userMaterialMaterialLeft{
            width: 5%;
            padding-left: .2rem;
            line-height: .42rem;
            span{
              display: inline-block;
              width: .1rem;
              height: .1rem;
              background-color: #15A29C;
              vertical-align: middle;
              border-radius: 500px;
              margin-top: -.05rem;
            }
          }
          .userMaterialMaterialRight{
            width: 95%;
            img{
              width: 1rem;
              height: 1rem;
              display: inline-block;
              border-radius: 500px;
            }
            // input[type="text"]{
            //   display: inline-block;
            //   width: 4rem;
            //   border: 1px solid #ddd;
            //   border-radius: .05rem;
            //   font-size: .14rem;
            //   font-weight: 500;
            //   color: #333;
            //   line-height: .4rem;
            //   padding: 0 .1rem;
            //   background-color: #f6f6f6;
            // }
            .userMaterialMaterialRightBox{
              display: flex;
              justify-content: left;
              flex-wrap: wrap;
              padding-right: .2rem;
              label:nth-child(5n){
                margin-right: 0;
              }
              label {
                width: 1.5rem;
                height: 1.5rem;
                display: inline-block;
                background-color: #eee;
                line-height: 1.5rem;
                margin-bottom: .2rem;
                margin-right: .2rem;
                .showUploadFile{
                  width: 100%;
                  height: 100%;
                  border-radius: 0;
                  vertical-align: top;
                }
                div{
                  display: inline-block;
                  width: 100%;
                  vertical-align: middle;
                  height: 1.5rem;
                  padding: .3rem .2rem;
                  line-height: normal;
                  img{
                    display: block;
                    width: .3rem;
                    height: .3rem;
                    margin: auto;
                  }
                  span{
                    font-size: .12rem;
                    line-height: .2rem;
                    padding-top: .1rem;
                    display: inline-block;
                  }
                }
                input[type="file"]{
                  display: none;
                }
              }
            }
            select{
              outline: none;
              background-color: #f6f6f6;
              height: .4rem;
              border: 1px solid #ddd;
              width: 1rem;
              border-radius: .05rem;
              padding: 0 .05rem;
              margin-right: .1rem;
            }
            textarea {
              display: inline-block;
              width: 2rem;
              border: 1px solid #ccc;
              border-radius: .05rem;
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .4rem;
              padding: 0 .1rem;
              resize: auto;
            }
          }
        }
      }
    }
    .btnBox{
      padding-left: .2rem;
      background-color: #fff;
      padding-bottom: .2rem;
      .btnDef{
        width: 2rem;
      }
    }
  }
}
</style>
